<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Table 表格 | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架" />
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css" />
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js" />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <link rel="modulepreload" href="/doc-next/assets/components_table.md.9ffc20f8.lean.js" />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <meta name="author" content="Vbenjs Team" />
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta name="keywords" content="vue vben admin docs" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="twitter:title" content="Table 表格 | Vben Admin" />
    <meta property="og:title" content="Table 表格 | Vben Admin" />
  </head>
  <body>
    <div id="app"
      ><!--[--><div class="theme"
        ><header class="nav-bar" data-v-172e455d
          ><div class="sidebar-button" data-v-172e455d
            ><svg
              class="icon"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              role="img"
              viewBox="0 0 448 512"
            >
              <path
                fill="currentColor"
                d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
                class
              ></path></svg></div
          ><a
            class="nav-bar-title"
            href="/doc-next/"
            aria-label="Vben Admin, back to home"
            data-v-172e455d
            data-v-dc837cb8
            ><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8 /> Vben Admin</a
          ><div class="flex-grow" data-v-172e455d></div
          ><div class="nav" data-v-172e455d
            ><nav class="nav-links" data-v-172e455d data-v-0cf770ed
              ><!--[--><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>指南</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>指南</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>深入</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>其他</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>组件</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>介绍</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>全局组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>常用组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item"
                          href="/doc-next/components/functional/context-menu"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>函数式组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>相关链接</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://discord.gg/8GuAdwDhj6"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>Discord Chat</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/thin/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vben-admin-thin-next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin-doc"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>文档源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>更新日志</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                  ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                    >赞助
                    <!----></a
                  ></div
                ></div
              ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
            ></div
          ><div class="nav-icons" data-v-172e455d
            ><div class="item" data-v-172e455d
              ><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style="display: none"
                >
                  <path
                    d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z"
                    fill="currentColor"
                  ></path></svg
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style=""
                >
                  <path
                    d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
                    fill="currentColor"
                  ></path></svg></button></div
            ><div class="item" data-v-172e455d
              ><a
                class="nav-btn"
                href="https://github.com/anncwb/vue-vben-admin"
                target="_blank"
                aria-label="View GitHub Repo"
                data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  data-v-172e455d
                >
                  <path
                    d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"
                    fill="currentColor"
                  ></path></svg></a></div></div
          ><!--[--><!--]--></header
        ><!--[--><aside class="sidebar" data-v-3e48a26e
          ><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed
            ><!--[--><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>指南</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>指南</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>深入</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>其他</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>组件</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>介绍</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>全局组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>常用组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item"
                        href="/doc-next/components/functional/context-menu"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>函数式组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>相关链接</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://discord.gg/8GuAdwDhj6"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>Discord Chat</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/thin/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vben-admin-thin-next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin-doc"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>文档源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>更新日志</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                  >赞助
                  <!----></a
                ></div
              ></div
            ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
          ><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e
            ><!--[--><li class="sidebar-link"
              ><p class="sidebar-link-item">组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/introduction">前言</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">全局组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/glob/button">Button</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">常用组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/basic">Basic</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/page">Page</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/icon">Icon</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/auth">Authority</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/form">Form</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item active" href="/doc-next/components/table">Table</a
                  ><ul class="sidebar-links"
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#usage">Usage</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#示例">示例</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#template-示例">template 示例</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a
                            class="sidebar-link-item"
                            href="#basiccolumn-和-tableaction-通过权限和业务控制显示隐藏的示例"
                            >BasicColumn 和 tableAction 通过权限和业务控制显示隐藏的示例</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#usetable">useTable</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#usage-1">Usage</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#methods">Methods</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#props">Props</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#tablesetting">TableSetting</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#basiccolumn">BasicColumn</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#editcomponenttype"
                            >EditComponentType</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#cellformat">CellFormat</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#事件">事件</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#slots">Slots</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#form-slots">Form-Slots</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#内置组件（只能用于表格内部）"
                        >内置组件（只能用于表格内部）</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#tableaction">TableAction</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#tableimg">TableImg</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#全局配置">全局配置</a
                      ><!----></li
                    ></ul
                  ></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/pop-confirm-button"
                    >PopConfirmButton</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/collapse-container"
                    >CollapseContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/scroll-container"
                    >ScrollContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/lazy-container"
                    >LazyContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/code-editor"
                    >CodeEditor</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/json-preview"
                    >JsonPreview</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-down">CountDown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/click-out-side"
                    >ClickOutSide</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-to">CountTo</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/cropper">Cropper</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/desc">Description</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/drawer">Drawer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/modal">Modal</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/flow-chart">FlowChart</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/upload">Upload</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tree">Tree</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/excel">Excel</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/qrcode">Qrcode</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/markdown">Markdown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/loading">Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tinymce">Tinymce</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/time">Time</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/strength-meter"
                    >StrengthMeter</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/verify">Verify</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/transition">Transition</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/virtual-scroll"
                    >VirtualScroll</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">函数式组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/context-menu"
                    >ContextMenu</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/loading"
                    >Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/preview"
                    >Preview</a
                  ><!----></li
                ></ul
              ></li
            ><!--]--></ul
          ><!--[--><!--]--></aside
        ><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div
          class="sidebar-mask"
        ></div
        ><main class="page" data-v-4c107763
          ><div class="container" data-v-4c107763
            ><!--[--><!--]--><div class="content" data-v-4c107763
              ><div data-v-4c107763
                ><h1 id="table-表格"
                  ><a class="header-anchor" href="#table-表格" aria-hidden="true">#</a> Table
                  表格</h1
                ><p>对 <code>antv</code> 的 table 组件进行封装</p
                ><blockquote><p>如果文档内没有，可以尝试在在线示例内寻找</p></blockquote
                ><h2 id="usage"
                  ><a class="header-anchor" href="#usage" aria-hidden="true">#</a> Usage</h2
                ><h3 id="示例"
                  ><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h3
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>基础示例<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">titleHelpMessage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>温馨提醒<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:dataSource</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:canResize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>canResize<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:striped</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:bordered</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ pageSize: 20 }<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toolbar</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 操作按钮 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> getBasicColumns<span class="token punctuation">,</span> getBasicData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./tableData&#39;</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicTable <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        columns<span class="token operator">:</span> <span class="token function">getBasicColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token function">getBasicData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="template-示例"
                  ><a class="header-anchor" href="#template-示例" aria-hidden="true">#</a> template
                  示例</h3
                ><p>所有可调用函数见下方 <code>Methods</code> 说明</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span>
      <span class="token attr-name">:canResize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RefTable示例<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">titleHelpMessage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>使用Ref调用表格内方法<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>api<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:rowSelection</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ type: <span class="token punctuation">&#39;</span>checkbox<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> unref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicTable<span class="token punctuation">,</span> TableActionType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> getBasicColumns<span class="token punctuation">,</span> getBasicShortColumns <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./tableData&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> demoListApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/api/demo/table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicTable <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> tableRef <span class="token operator">=</span> ref<span class="token operator">&lt;</span>Nullable<span class="token operator">&lt;</span>TableActionType<span class="token operator">&gt;&gt;</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">function</span> <span class="token function">getTableAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> tableAction <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>tableRef<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>tableAction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;tableAction is null&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> tableAction<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">function</span> <span class="token function">changeLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">getTableAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">getTableAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        tableRef<span class="token punctuation">,</span>
        api<span class="token operator">:</span> demoListApi<span class="token punctuation">,</span>
        columns<span class="token operator">:</span> <span class="token function">getBasicColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        changeLoading<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="basiccolumn-和-tableaction-通过权限和业务控制显示隐藏的示例"
                  ><a
                    class="header-anchor"
                    href="#basiccolumn-和-tableaction-通过权限和业务控制显示隐藏的示例"
                    aria-hidden="true"
                    >#</a
                  >
                  BasicColumn 和 tableAction 通过权限和业务控制显示隐藏的示例</h3
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ record }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TableAction</span>
          <span class="token attr-name">:actions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[
            {
              label: <span class="token punctuation">&#39;</span>编辑<span class="token punctuation">&#39;</span>,
              onClick: handleEdit.bind(null, record),
              auth: <span class="token punctuation">&#39;</span>other<span class="token punctuation">&#39;</span>, // 根据权限控制是否显示: 无权限，不显示
            },
            {
              label: <span class="token punctuation">&#39;</span>删除<span class="token punctuation">&#39;</span>,
              icon: <span class="token punctuation">&#39;</span>ic:outline-delete-outline<span class="token punctuation">&#39;</span>,
              onClick: handleDelete.bind(null, record),
              auth: <span class="token punctuation">&#39;</span>super<span class="token punctuation">&#39;</span>, // 根据权限控制是否显示: 有权限，会显示
            },
          ]<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">:dropDownActions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[
            {
              label: <span class="token punctuation">&#39;</span>启用<span class="token punctuation">&#39;</span>,
              popConfirm: {
                title: <span class="token punctuation">&#39;</span>是否启用？<span class="token punctuation">&#39;</span>,
                confirm: handleOpen.bind(null, record),
              },
              ifShow: (_action) =&gt; {
                return record.status !== <span class="token punctuation">&#39;</span>enable<span class="token punctuation">&#39;</span>; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
              },
            },
            {
              label: <span class="token punctuation">&#39;</span>禁用<span class="token punctuation">&#39;</span>,
              popConfirm: {
                title: <span class="token punctuation">&#39;</span>是否禁用？<span class="token punctuation">&#39;</span>,
                confirm: handleOpen.bind(null, record),
              },
              ifShow: () =&gt; {
                return record.status === <span class="token punctuation">&#39;</span>enable<span class="token punctuation">&#39;</span>; // 根据业务控制是否显示: enable状态的显示禁用按钮
              },
            },
            {
              label: <span class="token punctuation">&#39;</span>同时控制<span class="token punctuation">&#39;</span>,
              popConfirm: {
                title: <span class="token punctuation">&#39;</span>是否动态显示？<span class="token punctuation">&#39;</span>,
                confirm: handleOpen.bind(null, record),
              },
              auth: <span class="token punctuation">&#39;</span>super<span class="token punctuation">&#39;</span>, // 同时根据权限和业务控制是否显示
              ifShow: () =&gt; {
                return true; // 根据业务控制是否显示
              },
            },
          ]<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicTable<span class="token punctuation">,</span> useTable<span class="token punctuation">,</span> BasicColumn<span class="token punctuation">,</span> TableAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Table&#39;</span><span class="token punctuation">;</span>

  <span class="token keyword">import</span> <span class="token punctuation">{</span> demoListApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/api/demo/table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> columns<span class="token operator">:</span> BasicColumn<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&#39;姓名&#39;</span><span class="token punctuation">,</span>
      dataIndex<span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span>
      auth<span class="token operator">:</span> <span class="token string">&#39;test&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 根据权限控制是否显示: 无权限，不显示</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&#39;地址&#39;</span><span class="token punctuation">,</span>
      dataIndex<span class="token operator">:</span> <span class="token string">&#39;address&#39;</span><span class="token punctuation">,</span>
      auth<span class="token operator">:</span> <span class="token string">&#39;super&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 同时根据权限控制是否显示</span>
      <span class="token function-variable function">ifShow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">_column</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 根据业务控制是否显示</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicTable<span class="token punctuation">,</span> TableAction <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">&#39;TableAction组件及固定列示例&#39;</span><span class="token punctuation">,</span>
        api<span class="token operator">:</span> demoListApi<span class="token punctuation">,</span>
        columns<span class="token operator">:</span> columns<span class="token punctuation">,</span>
        bordered<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        actionColumn<span class="token operator">:</span> <span class="token punctuation">{</span>
          width<span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
          title<span class="token operator">:</span> <span class="token string">&#39;Action&#39;</span><span class="token punctuation">,</span>
          dataIndex<span class="token operator">:</span> <span class="token string">&#39;action&#39;</span><span class="token punctuation">,</span>
          slots<span class="token operator">:</span> <span class="token punctuation">{</span> customRender<span class="token operator">:</span> <span class="token string">&#39;action&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">function</span> <span class="token function">handleEdit</span><span class="token punctuation">(</span><span class="token parameter">record<span class="token operator">:</span> Recordable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;点击了编辑&#39;</span><span class="token punctuation">,</span> record<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">function</span> <span class="token function">handleDelete</span><span class="token punctuation">(</span><span class="token parameter">record<span class="token operator">:</span> Recordable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;点击了删除&#39;</span><span class="token punctuation">,</span> record<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">function</span> <span class="token function">handleOpen</span><span class="token punctuation">(</span><span class="token parameter">record<span class="token operator">:</span> Recordable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;点击了启用&#39;</span><span class="token punctuation">,</span> record<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        registerTable<span class="token punctuation">,</span>
        handleEdit<span class="token punctuation">,</span>
        handleDelete<span class="token punctuation">,</span>
        handleOpen<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h2 id="usetable"
                  ><a class="header-anchor" href="#usetable" aria-hidden="true">#</a> useTable</h2
                ><p>使用组件自带的 <strong>useTable</strong> 可以方便使用表单</p
                ><p>下面是一个使用简单表格的示例，</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicTable<span class="token punctuation">,</span> useTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> getBasicColumns<span class="token punctuation">,</span> getBasicShortColumns <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./tableData&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> demoListApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/api/demo/table&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicTable <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>
        registerTable<span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          setLoading<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        api<span class="token operator">:</span> demoListApi<span class="token punctuation">,</span>
        columns<span class="token operator">:</span> <span class="token function">getBasicColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">function</span> <span class="token function">changeLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        registerTable<span class="token punctuation">,</span>
        changeLoading<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="usage-1"
                  ><a class="header-anchor" href="#usage-1" aria-hidden="true">#</a> Usage</h3
                ><p>用于调用 Table 内部方法及 table 参数配置</p
                ><div class="language-ts">
                  <pre><code><span class="token comment">// 表格的props也可以直接注册到useTable内部</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">,</span> methods<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div
                ><p><strong>register</strong></p
                ><p
                  >register 用于注册 useTable，如果需要使用<code>useTable</code>提供的 api，必须将
                  register 传入组件的 onRegister</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> register <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="methods"
                  ><a class="header-anchor" href="#methods" aria-hidden="true">#</a> Methods</h3
                ><p><strong>setProps</strong></p
                ><p>类型：<code>(props: Partial&lt;BasicTableProps&gt;) =&gt; void</code></p
                ><p>说明: 用于设置表格参数</p><p><strong>reload</strong></p
                ><p>类型：<code>(opt?: FetchParams) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 刷新表格</p><p><strong>redoHeight</strong></p
                ><p>类型：<code>() =&gt; void</code></p
                ><p>说明: 重新计算表格高度</p><p><strong>setLoading</strong></p
                ><p>类型：<code>(loading: boolean) =&gt; void</code></p
                ><p>说明: 设置表格 loading 状态</p><p><strong>getDataSource</strong></p
                ><p>获取表格数据</p><p>类型：<code>&lt;T = Recordable&gt;() =&gt; T[]</code></p
                ><p>说明: 获取表格数据</p><p><strong>getRawDataSource</strong></p
                ><p>获取后端接口原始数据</p
                ><p>类型：<code>&lt;T = Recordable&gt;() =&gt; T</code></p
                ><p>说明: 获取后端接口原始数据</p><p><strong>getColumns</strong></p
                ><p>类型：<code>(opt?: GetColumnsParams) =&gt; BasicColumn[]</code></p
                ><p>说明: 获取表格数据</p><p><strong>setColumns</strong></p
                ><p>类型：<code>(columns: BasicColumn[] | string[]) =&gt; void</code></p
                ><p>说明: 设置表头数据</p><p><strong>setTableData</strong></p
                ><p>类型：<code>&lt;T = Recordable&gt;(values: T[]) =&gt; void</code></p
                ><p>说明: 设置表格数据</p><p><strong>setPagination</strong></p
                ><p>类型：<code>(info: Partial&lt;PaginationProps&gt;) =&gt; void</code></p
                ><p>说明: 设置分页信息</p><p><strong>deleteSelectRowByKey</strong></p
                ><p>类型：<code>(key: string) =&gt; void</code></p
                ><p>说明: 根据 key 删除取消选中行</p><p><strong>getSelectRowKeys</strong></p
                ><p>类型：<code>() =&gt; string[]</code></p
                ><p>说明: 获取选中行的 keys</p><p><strong>getSelectRows</strong></p
                ><p>类型：<code>&lt;T = Recordable&gt;() =&gt; T[]</code></p
                ><p>说明: 获取选中行的 rows</p><p><strong>clearSelectedRowKeys</strong></p
                ><p>类型：<code>() =&gt; void</code></p
                ><p>说明: 清空选中行</p><p><strong>setSelectedRowKeys</strong></p
                ><p>类型：<code>(rowKeys: string[] | number[]) =&gt; void</code></p
                ><p>说明: 设置选中行</p><p><strong>getPaginationRef</strong></p
                ><p>类型：<code>() =&gt; PaginationProps | boolean</code></p
                ><p>说明: 获取当前分页信息</p><p><strong>getShowPagination</strong></p
                ><p>类型：<code>() =&gt; boolean</code></p
                ><p>说明: 获取当前是否显示分页</p><p><strong>setShowPagination</strong></p
                ><p>类型：<code>(show: boolean) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 设置当前是否显示分页</p><p><strong>getRowSelection</strong></p
                ><p>类型：<code>() =&gt; TableRowSelection&lt;Recordable&gt;</code></p
                ><p>说明: 获取勾选框信息</p><p><strong>updateTableData</strong></p
                ><p>类型：<code>(index: number, key: string, value: any)=&gt;void</code></p
                ><p>说明: 更新表格数据</p><p><strong>updateTableDataRecord</strong></p
                ><p
                  >类型：
                  <code
                    >(rowKey: string | number, record: Recordable) =&gt; Recordable | void</code
                  ></p
                ><p>说明： 根据唯一的rowKey更新指定行的数据.可用于不刷新整个表格而局部更新数据</p
                ><p><strong>getForm</strong></p
                ><p>类型：<code>() =&gt; FormActionType</code></p
                ><p>说明: 如果开启了搜索区域。可以通过该函数获取表单对象函数进行操作</p
                ><p><strong>expandAll</strong></p
                ><p>类型：<code>() =&gt; void</code></p
                ><p>说明: 展开树形表格</p><p><strong>collapseAll</strong></p
                ><p>类型：<code>() =&gt; void</code></p
                ><p>说明: 折叠树形表格</p
                ><h2 id="props"
                  ><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2
                ><div class="tip custom-block"
                  ><p class="custom-block-title">温馨提醒</p
                  ><ul
                    ><li
                      >除以下参数外，官方文档内的 props 也都支持，具体可以参考
                      <a
                        href="https://2x.antdv.com/components/table-cn/#API"
                        target="_blank"
                        rel="noopener noreferrer"
                        >antv table</a
                      ></li
                    ><li
                      >注意：<code>defaultExpandAllRows</code>、<code>defaultExpandedRowKeys</code>
                      属性在basicTable中不受支持，并且在<code>antv table</code>
                      v2.2.0之后也被移除。</li
                    ></ul
                  ></div
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th
                      ><th>版本</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>clickToRowSelect</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>点击行是否选中 checkbox 或者 radio。需要开启</td><td></td></tr
                    ><tr
                      ><td>sortFn</td
                      ><td><code>(sortInfo: SorterResult&lt;any&gt;) =&gt; any</code></td
                      ><td>-</td><td>-</td><td>自定义排序方法。见下方全局配置说明</td><td></td></tr
                    ><tr
                      ><td>filterFn</td
                      ><td
                        ><code
                          >(sortInfo: Partial&lt;Recordable&lt;string[]&gt;&gt;) =&gt; any</code
                        ></td
                      ><td>-</td><td>-</td><td>自定义过滤方法。见下方全局配置说明</td><td></td></tr
                    ><tr
                      ><td>showTableSetting</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>显示表格设置工具</td><td></td></tr
                    ><tr
                      ><td>tableSetting</td><td><code>TableSetting</code></td
                      ><td>-</td><td>-</td><td>表格设置工具配置，见下方 TableSetting</td
                      ><td></td></tr
                    ><tr
                      ><td>striped</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>斑马纹</td><td></td></tr
                    ><tr
                      ><td>inset</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>取消表格的默认 padding</td><td></td></tr
                    ><tr
                      ><td>autoCreateKey</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>是否自动生成 key</td><td></td></tr
                    ><tr
                      ><td>showSummary</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>是否显示合计行</td><td></td></tr
                    ><tr
                      ><td>summaryData</td><td><code>any[]</code></td
                      ><td>-</td><td>-</td><td>自定义合计数据。如果有则显示该数据</td><td></td></tr
                    ><tr
                      ><td>emptyDataIsShowTable</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>在启用搜索表单的前提下，是否在表格没有数据的时候显示表格</td
                      ><td></td></tr
                    ><tr
                      ><td>summaryFunc</td><td><code>(...arg) =&gt; any[]</code></td
                      ><td>-</td><td>-</td><td>计算合计行的方法</td><td></td></tr
                    ><tr
                      ><td><s>canRowDrag</s></td
                      ><td
                        ><s><code>boolean</code></s></td
                      ><td
                        ><s><code>false</code></s></td
                      ><td>-</td><td><s>是否可拖拽行排序</s></td
                      ><td></td></tr
                    ><tr
                      ><td><s>canColDrag</s></td
                      ><td
                        ><s><code>boolean</code></s></td
                      ><td
                        ><s><code>false</code></s></td
                      ><td>-</td><td><s>是否可拖拽列</s></td
                      ><td></td></tr
                    ><tr
                      ><td>isTreeTable</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>是否树表</td><td></td></tr
                    ><tr
                      ><td>api</td><td><code>(...arg: any) =&gt; Promise&lt;any&gt;</code></td
                      ><td>-</td><td>-</td
                      ><td>请求接口，可以直接将<code>src/api内的函数直接传入</code></td
                      ><td></td></tr
                    ><tr
                      ><td>beforeFetch</td><td><code>(T)=&gt;T</code></td
                      ><td>-</td><td>-</td><td>请求之前对参数进行处理</td><td></td></tr
                    ><tr
                      ><td>afterFetch</td><td><code>(T)=&gt;T</code></td
                      ><td>-</td><td>-</td><td>请求之后对返回值进行处理</td><td></td></tr
                    ><tr
                      ><td>handleSearchInfoFn</td><td><code>(T)=&gt;T</code></td
                      ><td>-</td><td>-</td><td>开启表单后，在请求之前处理搜索条件参数</td
                      ><td></td></tr
                    ><tr
                      ><td>fetchSetting</td><td><code>FetchSetting</code></td
                      ><td>-</td><td>-</td
                      ><td>接口请求配置，可以配置请求的字段和响应的字段名，见下方全局配置说明</td
                      ><td></td></tr
                    ><tr
                      ><td>immediate</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td
                      ><td
                        >组件加载后是否立即请求接口，在 api 有传的情况下，如果为 false，需要自行使用
                        reload 加载表格数据</td
                      ><td></td></tr
                    ><tr
                      ><td>searchInfo</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>额外的请求参数</td><td></td></tr
                    ><tr
                      ><td>useSearchForm</td><td><code>boolean</code></td
                      ><td>false</td><td>-</td><td>使用搜索表单</td><td></td></tr
                    ><tr
                      ><td>formConfig</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>表单配置，参考表单组件的 Props</td><td></td></tr
                    ><tr
                      ><td>columns</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>表单列信息 BasicColumn[]</td><td></td></tr
                    ><tr
                      ><td>showIndexColumn</td><td><code>boolean</code></td
                      ><td>ture</td><td>-</td><td>是否显示序号列</td><td></td></tr
                    ><tr
                      ><td>indexColumnProps</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>序号列配置 BasicColumn</td><td></td></tr
                    ><tr
                      ><td>actionColumn</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>表格右侧操作列配置 BasicColumn</td><td></td></tr
                    ><tr
                      ><td>ellipsis</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>文本超过宽度是否显示...</td><td></td></tr
                    ><tr
                      ><td>canResize</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td
                      ><td
                        >是否可以自适应高度(如果置于PageWrapper组件内，请勿启用PageWrapper的fixedHeight属性，二者不可同时使用)</td
                      ><td></td></tr
                    ><tr
                      ><td>clearSelectOnPageChange</td><td><code>boolean</code></td
                      ><td>false</td><td>-</td><td>切换页码是否重置勾选状态</td><td></td></tr
                    ><tr
                      ><td>resizeHeightOffset</td><td><code>number</code></td
                      ><td>0</td><td>-</td><td>表格自适应高度计算结果会减去这个值</td><td></td></tr
                    ><tr
                      ><td>rowSelection</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>选择列配置</td><td></td></tr
                    ><tr
                      ><td>title</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>表格标题</td><td></td></tr
                    ><tr
                      ><td>titleHelpMessage</td><td><code>string ｜ string[]</code></td
                      ><td>-</td><td>-</td><td>表格标题右侧温馨提醒</td><td></td></tr
                    ><tr
                      ><td>maxHeight</td><td><code>number</code></td
                      ><td>-</td><td>-</td><td>表格最大高度，超出会显示滚动条</td><td></td></tr
                    ><tr
                      ><td>dataSource</td><td><code>any[]</code></td
                      ><td>-</td><td>-</td><td>表格数据，非 api 加载情况</td><td></td></tr
                    ><tr
                      ><td>bordered</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>是否显示表格边框</td><td></td></tr
                    ><tr
                      ><td>pagination</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>分页信息配置，为 <code>false</code> 不显示分页</td
                      ><td></td></tr
                    ><tr
                      ><td>loading</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>表格 loading 状态</td><td></td></tr
                    ><tr
                      ><td>scroll</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>参考官方文档 scroll</td><td></td></tr
                    ><tr
                      ><td>beforeEditSubmit</td
                      ><td
                        ><code
                          >({record: Recordable,index: number,key: string | number,value: any})
                          =&gt; Promise&lt;any&gt;</code
                        ></td
                      ><td>-</td><td>-</td
                      ><td
                        >单元格编辑状态提交回调，返回false将阻止单元格提交数据到table。该回调在行编辑模式下无效。</td
                      ><td>2.7.2</td></tr
                    ></tbody
                  ></table
                ><h3 id="tablesetting"
                  ><a class="header-anchor" href="#tablesetting" aria-hidden="true">#</a>
                  TableSetting</h3
                ><div class="language-ts">
                  <pre><code><span class="token punctuation">{</span>
  <span class="token comment">// 是否显示刷新按钮</span>
  redo<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 是否显示尺寸调整按钮</span>
  size<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 是否显示字段调整按钮</span>
  setting<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 是否显示全屏按钮</span>
  fullScreen<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><h2 id="basiccolumn"
                  ><a class="header-anchor" href="#basiccolumn" aria-hidden="true">#</a>
                  BasicColumn</h2
                ><p
                  >除 参考官方
                  <a
                    href="https://2x.antdv.com/components/table-cn/#Column"
                    target="_blank"
                    rel="noopener noreferrer"
                    >Column 配置</a
                  >外，扩展以下参数</p
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>defaultHidden</td><td><code>boolean</code></td
                      ><td>false</td><td>-</td><td>默认隐藏，可在列配置显示</td></tr
                    ><tr
                      ><td>helpMessage</td><td><code>string｜string[]</code></td
                      ><td>-</td><td>-</td><td>列头右侧帮助文本</td></tr
                    ><tr
                      ><td>edit</td><td><code>boolean</code></td
                      ><td>-</td><td>-</td><td>是否开启单元格编辑</td></tr
                    ><tr
                      ><td>editRow</td><td><code>boolean</code></td
                      ><td>-</td><td>-</td><td>是否开启行编辑</td></tr
                    ><tr
                      ><td>editable</td><td><code>boolean</code></td
                      ><td>false</td><td>-</td><td>是否处于编辑状态</td></tr
                    ><tr
                      ><td>editComponent</td><td><code>ComponentType</code></td
                      ><td><code>Input</code></td
                      ><td>-</td><td>编辑组件</td></tr
                    ><tr
                      ><td>editComponentProps</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>对应编辑组件的 props</td></tr
                    ><tr
                      ><td>editRule</td
                      ><td
                        ><code
                          >((text: string, record: Recordable) =&gt; Promise&lt;string&gt;)</code
                        ></td
                      ><td>-</td><td>-</td><td>对应编辑组件的表单校验</td></tr
                    ><tr
                      ><td>editValueMap</td><td><code>(value: any) =&gt; string</code></td
                      ><td>-</td><td>-</td><td>对应单元格值枚举</td></tr
                    ><tr
                      ><td>onEditRow</td><td><code>（）=&gt;void</code></td
                      ><td>-</td><td>-</td><td>触发行编辑</td></tr
                    ><tr
                      ><td>format</td><td><code>CellFormat</code></td
                      ><td>-</td><td>-</td><td>单元格格式化</td></tr
                    ><tr
                      ><td>auth</td
                      ><td
                        ><code>RoleEnum</code> ｜ <code>RoleEnum[]</code> ｜ <code>string</code> ｜
                        <code>string[]</code></td
                      ><td>-</td><td>-</td><td>根据权限编码来控制当前列是否显示</td></tr
                    ><tr
                      ><td>ifShow</td
                      ><td><code>boolean ｜ ((action: ActionItem) =&gt; boolean)</code></td
                      ><td>-</td><td>-</td><td>根据业务状态来控制当前列是否显示</td></tr
                    ></tbody
                  ></table
                ><h3 id="editcomponenttype"
                  ><a class="header-anchor" href="#editcomponenttype" aria-hidden="true">#</a>
                  EditComponentType</h3
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">ComponentType</span> <span class="token operator">=</span>
  <span class="token operator">|</span> <span class="token string">&#39;Input&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputNumber&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Select&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;ApiSelect&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Checkbox&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Switch&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;DatePicker&#39;</span>  <span class="token comment">// v2.5.0 以上</span>
  <span class="token operator">|</span> <span class="token string">&#39;TimePicker&#39;</span><span class="token punctuation">;</span> <span class="token comment">// v2.5.0 以上</span>
</code></pre></div
                ><h3 id="cellformat"
                  ><a class="header-anchor" href="#cellformat" aria-hidden="true">#</a>
                  CellFormat</h3
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">CellFormat</span> <span class="token operator">=</span>
  <span class="token operator">|</span> <span class="token builtin">string</span>
  <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>text<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> record<span class="token operator">:</span> Recordable<span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span>
  <span class="token operator">|</span> Map<span class="token operator">&lt;</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
</code></pre></div
                ><h2 id="事件"
                  ><a class="header-anchor" href="#事件" aria-hidden="true">#</a> 事件</h2
                ><div class="tip custom-block"
                  ><p class="custom-block-title">温馨提醒</p
                  ><p
                    >除以下事件外，官方文档内的 event 也都支持，具体可以参考
                    <a
                      href="https://2x.antdv.com/components/table-cn/#API"
                      target="_blank"
                      rel="noopener noreferrer"
                      >antv table</a
                    ></p
                  ></div
                ><table
                  ><thead
                    ><tr><th>事件</th><th>回调参数</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr
                      ><td>fetch-success</td><td><code>Function({items,total})</code></td
                      ><td>接口请求成功后触发</td></tr
                    ><tr
                      ><td>fetch-error</td><td><code>Function(error)</code></td
                      ><td>错误信息</td></tr
                    ><tr
                      ><td>selection-change</td><td><code>Function({keys，rows})</code></td
                      ><td>勾选事件触发</td></tr
                    ><tr
                      ><td>row-click</td><td><code>Function(record, index, event)</code></td
                      ><td>行点击触发</td></tr
                    ><tr
                      ><td>row-dbClick</td><td><code>Function(record, index, event)</code></td
                      ><td>行双击触发</td></tr
                    ><tr
                      ><td>row-contextmenu</td><td><code>Function(record, index, event)</code></td
                      ><td>行右键触发</td></tr
                    ><tr
                      ><td>row-mouseenter</td><td><code>Function(record, index, event)</code></td
                      ><td>行移入触发</td></tr
                    ><tr
                      ><td>row-mouseleave</td><td><code>Function(record, index, event)</code></td
                      ><td>行移出触发</td></tr
                    ><tr
                      ><td>edit-end</td><td><code>Function({record, index, key, value})</code></td
                      ><td>单元格编辑完成触发</td></tr
                    ><tr
                      ><td>edit-cancel</td
                      ><td><code>Function({record, index, key, value})</code></td
                      ><td>单元格取消编辑触发</td></tr
                    ><tr
                      ><td>edit-row-end</td><td><code>Function()</code></td
                      ><td>行编辑结束触发</td></tr
                    ><tr
                      ><td>edit-change</td><td><code>Function({column,value,record})</code></td
                      ><td>单元格编辑组件的 value 发生变化时触发</td></tr
                    ></tbody
                  ></table
                ><div class="tip custom-block"
                  ><p class="custom-block-title">edit-change 说明</p
                  ><p
                    >从版本 <code>2.4.2</code> 起，对于 <code>edit-change</code> 事件，<code
                      >record</code
                    >
                    中的 <code>editValueRefs</code> 装载了当前行的所有编辑组件（如果有的话）的值的
                    <code>ref</code> 对象，可用于处理同一行中的编辑组件的联动。请看下面的例子</p
                  ></div
                ><div class="language-javascript">
                  <pre><code>      <span class="token keyword">function</span> <span class="token function">onEditChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> column<span class="token punctuation">,</span> record <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 当同一行的单价或者数量发生变化时，更新合计金额（三个数据均为当前行编辑组件的值）</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>column<span class="token punctuation">.</span>dataIndex <span class="token operator">===</span> <span class="token string">&#39;qty&#39;</span> <span class="token operator">||</span> column<span class="token punctuation">.</span>dataIndex <span class="token operator">===</span> <span class="token string">&#39;price&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> <span class="token punctuation">{</span> editValueRefs<span class="token operator">:</span> <span class="token punctuation">{</span> total<span class="token punctuation">,</span> qty<span class="token punctuation">,</span> price <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> record<span class="token punctuation">;</span>
          total<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>qty<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">unref</span><span class="token punctuation">(</span>price<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
</code></pre></div
                ><h2 id="slots"
                  ><a class="header-anchor" href="#slots" aria-hidden="true">#</a> Slots</h2
                ><div class="tip custom-block"
                  ><p class="custom-block-title">温馨提醒</p
                  ><p
                    >除以下参数外，官方文档内的 slot 也都支持，具体可以参考
                    <a
                      href="https://2x.antdv.com/components/table-cn/#API"
                      target="_blank"
                      rel="noopener noreferrer"
                      >antv table</a
                    ></p
                  ></div
                ><table
                  ><thead
                    ><tr><th>名称</th><th>说明</th><th>版本</th></tr></thead
                  ><tbody
                    ><tr><td>tableTitle</td><td>表格顶部左侧区域</td><td></td></tr
                    ><tr><td>toolbar</td><td>表格顶部右侧区域</td><td></td></tr
                    ><tr><td>expandedRowRender</td><td>展开行区域</td><td></td></tr
                    ><tr
                      ><td>headerTop</td><td>表格顶部区域（标题上方）</td><td>2.6.1</td></tr
                    ></tbody
                  ></table
                ><h2 id="form-slots"
                  ><a class="header-anchor" href="#form-slots" aria-hidden="true">#</a>
                  Form-Slots</h2
                ><p
                  >当开启 form 表单后。以<code>form-xxxx</code>为前缀的 slot 会被视为 form 的
                  slot</p
                ><p
                  >xxxx 为 form 组件的 slot。具体参考<a href="./form.html#Slots"
                    >form 组件文档</a
                  ></p
                ><p>e.g</p
                ><div class="language-">
                  <pre><code>form-submitBefore
</code></pre></div
                ><h2 id="内置组件（只能用于表格内部）"
                  ><a class="header-anchor" href="#内置组件（只能用于表格内部）" aria-hidden="true"
                    >#</a
                  >
                  内置组件（只能用于表格内部）</h2
                ><h3 id="tableaction"
                  ><a class="header-anchor" href="#tableaction" aria-hidden="true">#</a>
                  TableAction</h3
                ><p>用于表格右侧操作列渲染</p
                ><h4 id="props-1"
                  ><a class="header-anchor" href="#props-1" aria-hidden="true">#</a> Props</h4
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th
                      ><th>版本</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>actions</td><td><code>ActionItem[]</code></td
                      ><td>-</td><td>-</td><td>右侧操作列按钮列表</td><td></td></tr
                    ><tr
                      ><td>dropDownActions</td><td><code>ActionItem[]</code></td
                      ><td>-</td><td>-</td><td>右侧操作列更多下拉按钮列表</td><td></td></tr
                    ><tr
                      ><td>stopButtonPropagation</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td>是否阻止操作按钮的click事件冒泡</td><td>2.5.0</td></tr
                    ></tbody
                  ></table
                ><p><strong>ActionItem</strong></p
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ActionItem</span> <span class="token punctuation">{</span>
  <span class="token comment">// 按钮文本</span>
  label<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  <span class="token comment">// 是否禁用</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 按钮颜色</span>
  color<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">&#39;success&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;error&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;warning&#39;</span><span class="token punctuation">;</span>
  <span class="token comment">// 按钮类型</span>
  type<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  <span class="token comment">// button组件props</span>
  props<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  <span class="token comment">// 按钮图标</span>
  icon<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  <span class="token comment">// 气泡确认框</span>
  popConfirm<span class="token operator">?</span><span class="token operator">:</span> PopConfirm<span class="token punctuation">;</span>
  <span class="token comment">// 是否显示分隔线，v2.0.0+</span>
  divider<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 根据权限编码来控制当前列是否显示，v2.4.0+</span>
  auth<span class="token operator">?</span><span class="token operator">:</span> RoleEnum <span class="token operator">|</span> RoleEnum<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token comment">// 根据业务状态来控制当前列是否显示，v2.4.0+</span>
  ifShow<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>action<span class="token operator">:</span> ActionItem<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 点击回调</span>
  onClick<span class="token operator">?</span><span class="token operator">:</span> Fn<span class="token punctuation">;</span>
  <span class="token comment">// Tooltip配置，2.5.3以上版本支持，可以配置为string，或者完整的tooltip属性</span>
  tooltip<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> TooltipProps
<span class="token punctuation">}</span>
</code></pre></div
                ><p
                  >有关TooltipProps的说明，请参考<a
                    href="https://2x.antdv.com/components/tooltip-cn#API"
                    target="_blank"
                    rel="noopener noreferrer"
                    >tooltip</a
                  ></p
                ><p><strong>PopConfirm</strong></p
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">PopConfirm</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  okText<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  cancelText<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  confirm<span class="token operator">:</span> Fn<span class="token punctuation">;</span>
  cancel<span class="token operator">?</span><span class="token operator">:</span> Fn<span class="token punctuation">;</span>
  icon<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><h3 id="tableimg"
                  ><a class="header-anchor" href="#tableimg" aria-hidden="true">#</a> TableImg</h3
                ><p>用于渲染单元格图片,支持图片预览</p
                ><h4 id="props-2"
                  ><a class="header-anchor" href="#props-2" aria-hidden="true">#</a> Props</h4
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th
                      ><th>版本</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>imgList</td><td><code>string[]</code></td
                      ><td>-</td><td>-</td><td>图片地址列表</td><td></td></tr
                    ><tr
                      ><td>size</td><td><code>number</code></td
                      ><td>-</td><td>-</td><td>图片大小</td><td></td></tr
                    ><tr
                      ><td>simpleShow</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td>简单显示模式（只显示第一张图片）</td><td>2.5.0</td></tr
                    ><tr
                      ><td>showBadge</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td><code>true/false</code></td
                      ><td>简单模式下是否显示计数Badge</td><td>2.5.0</td></tr
                    ><tr
                      ><td>margin</td><td><code>number</code></td
                      ><td>4</td><td>-</td><td>常规模式下的图片间距</td><td>2.5.0</td></tr
                    ><tr
                      ><td>srcPrefix</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>在每一个图片src前插入的内容</td><td>2.5.0</td></tr
                    ></tbody
                  ></table
                ><h2 id="全局配置"
                  ><a class="header-anchor" href="#全局配置" aria-hidden="true">#</a> 全局配置</h2
                ><p
                  >在<a
                    href="https://github.com/anncwb/vue-vben-admin/tree/main/src/settings/componentSetting.ts"
                    target="_blank"
                    rel="noopener noreferrer"
                    >componentsSettings</a
                  >
                  可以配置全局参数。用于统一整个项目的风格。可以通过 props 传值覆盖</p
                ></div
              ></div
            ><footer class="page-footer" data-v-4c107763 data-v-ddc19c16
              ><div class="edit" data-v-ddc19c16
                ><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc
                  ><a
                    class="link"
                    href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/components/table.md"
                    target="_blank"
                    rel="noopener noreferrer"
                    data-v-5c10c4bc
                    >为此页提供修改建议
                    <svg
                      class="icon outbound icon"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                      x="0px"
                      y="0px"
                      viewbox="0 0 100 100"
                      width="15"
                      height="15"
                      data-v-5c10c4bc
                    >
                      <path
                        fill="currentColor"
                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                      ></path>
                      <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                      ></polygon></svg></a></div></div
              ><div class="updated" data-v-ddc19c16><!----></div></footer
            ><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634
              ><div class="container" data-v-0002a634
                ><div class="prev" data-v-0002a634
                  ><a class="link" href="/doc-next/components/form" data-v-0002a634
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-prev"
                      data-v-0002a634
                    >
                      <path
                        d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
                      ></path></svg
                    ><span class="text" data-v-0002a634>Form</span></a
                  ></div
                ><div class="next" data-v-0002a634
                  ><a class="link" href="/doc-next/components/pop-confirm-button" data-v-0002a634
                    ><span class="text" data-v-0002a634>PopConfirmButton</span
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-next"
                      data-v-0002a634
                    >
                      <path
                        d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
                      ></path></svg></a></div></div></div
            ><!--[--><!--]--></div
          ></main
        ></div
      ><!----><!--]--></div
    >
    <script>
      __VP_HASH_MAP__ = JSON.parse(
        '{"index.md":"2734edcc","readme.md":"e1519bf2","dep_cors.md":"204fc85f","dep_dark.md":"43a11d42","dep_i18n.md":"a802b766","dep_icon.md":"439f8e1c","dep_lint.md":"e8646b9e","components_auth.md":"b02963b8","components_basic.md":"fca49067","components_click-out-side.md":"88043de3","components_code-editor.md":"6afcba77","components_collapse-container.md":"b2928273","components_count-down.md":"c92778a4","components_count-to.md":"c17f243c","components_cropper.md":"4a855951","components_desc.md":"44431141","components_drawer.md":"f8ba528e","components_excel.md":"d99f9b91","components_flow-chart.md":"edffb78e","components_form.md":"047930e8","components_icon.md":"0ffa2e82","components_introduction.md":"7cb286c9","components_json-preview.md":"c1dd06c0","components_lazy-container.md":"60c806dc","components_loading.md":"06300eaf","components_markdown.md":"0c696756","components_modal.md":"135caed7","components_page.md":"28a90d66","components_pop-confirm-button.md":"c26f7c65","components_qrcode.md":"dac7ed30","components_scroll-container.md":"1dffa01f","components_strength-meter.md":"d8a0e073","components_table.md":"9ffc20f8","components_time.md":"364e4fcd","components_tinymce.md":"27726c6d","components_transition.md":"1c742571","components_tree.md":"9f313e94","components_upload.md":"5eaac62a","components_verify.md":"d40e7d3d","components_virtual-scroll.md":"9df7959b","guide_auth.md":"7bab7e41","guide_component.md":"35361b68","guide_deploy.md":"5e737a9c","guide_design.md":"12ad7145","guide_electron.md":"c05175be","guide_index.md":"773f5681","guide_introduction.md":"70896801","guide_lib.md":"f35e142b","guide_menu.md":"a61b3e0c","guide_mock.md":"7ad03e52","guide_router.md":"4af7d754","guide_settings.md":"15dd5414","other_donate.md":"a2bcdefe","other_doubt.md":"7d012b2e","other_faq.md":"e1457c01","other_server.md":"3adeb1fd","components_functional_context-menu.md":"c6c1cfd3","components_functional_loading.md":"b7278715","components_functional_preview.md":"90804e55","components_glob_button.md":"29118f06"}',
      );
    </script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>
